<!-- 二次聚焦贴键盘 -->
<template>
	<view class="editor-container" :class="{'editor-container-off' : !statusOn}">
		<view class="editor-box" :style="{ 'bottom': editorBottom +'px' }">
			<view class="edit-area" :class="{'edit-area-on' : statusOn}">
				<view class="edit-body">
					<editor id="seeker-editor" :placeholder="placeholder" showImgSize showImgToolbar showImgResize
						@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @focus="bindFocus"
						@blur="bindBlur" @input="bindInput" :focus="focus"></editor>
				</view>
			</view>
			<view class="edit-bar" v-show="statusOn">
				<view v-for="item in barListActive" :key="item.id" @click="handleBarClick(item)" :style="item.style">
					<template v-if="item.text">
						<span :style="{ color: item.activeColor }">
							{{ item.text }}
						</span>
					</template>
					<template v-else>
						<img :src="item.activeIcon" />
					</template>
				</view>
			</view>
		</view>
		<view class="editor-mask" @click="handleClickMask"></view>
	</view>
</template>

<script>
	import component from '../components.js'
	import UploadOss from '@/common/util/UploadOss'
	export default {
		mixins: [component],
		props: {
			// 富文本值
			value: {
				type: String,
				default: null,
			},
		},
		data() {
			const isIos = uni.getSystemInfoSync().platform.includes('ios')
			return {
				isIos,
				statusOn: false, //编辑器可用
				editorCtx: null, // 编辑器实例
				focus: false, // 编辑器光标聚焦
				readOnly: false, // 只读
				formats: {}, // 当前选中的格式化样式
				inputFakeText: '', // 输入框展示内容
				placeholder: '输入你的内容',
				keyHei: 0, // 键盘高度
				editorBottom: 0,
				barList: [
					// 操作栏
					{
						id: 0,
						name: '标题',
						icon: 'https://www.cdn.kxcdedu.top/image/default/6E3B335D518A470A83E4DD6E6BBA0D9F-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/96F05A3A1CB844088972FABAEAA99208-6-2.png',
						color: '#333333',
						colorAct: '#6B5AF7',
						format: {
							key: 'header',
							val: 3,
						},
					},
					{
						id: 123,
						name: '有序序号',
						icon: 'https://www.cdn.kxcdedu.top/image/default/4FE31194C52549AE9A1CDDBD3C186B55-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/D459EC7F8F404183A401AC1F7AD4A568-6-2.png',
						color: '#333333',
						colorAct: '#6B5AF7',
						format: {
							key: 'list',
							val: 'ordered',
						},
					},
					{
						id: 456,
						name: '无序序号',
						icon: 'https://www.cdn.kxcdedu.top/image/default/8733E0D41D414F3182CE3A644141052D-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/988AE0A34F6A4BA38B9F062151D0916D-6-2.png',
						color: '#333333',
						colorAct: '#6B5AF7',
						format: {
							key: 'list',
							val: 'bullet',
						},
					},
					{
						id: 1,
						name: '加粗',
						icon: 'https://www.cdn.kxcdedu.top/image/default/DAD513E55E4843309C62ED5B4580D375-6-2.png',
						iconAct: 'https://www.cdn.kxcdedu.top/image/default/E4B15B816ABF45ACB71AB5CF6D807E6C-6-2.png',
						format: {
							key: 'bold',
							// #ifdef APP-PLUS || H5
							val: true,
							// #endif
							// #ifdef MP
							val: 'strong',
							// #endif
						},
					},
					{
						id: 2,
						name: '图片',
						icon: 'https://www.cdn.kxcdedu.top/image/default/ADEC62D6DA3C41D683DC5E42F1D6A713-6-2.png',
					},
					// {
					//   id: 3,
					//   name: '撤销',
					//   icon: '/static/edit_icon/last_act.png',
					// },
					// {
					//   id: 4,
					//   name: '重做',
					//   icon: '/static/edit_icon/next_act.png',
					// },
					{
						id: 5,
						name: '完成',
						text: '完成',
						style: {
							color: '#FFFFFF',
							fontSize: '24rpx',
							fontWeight: '500',
							backgroundColor: '#5DACB1',
							borderRadius: '10rpx',
							padding: '6rpx 20rpx',
						},
					},
				],
			}
		},
		mounted() {
			uni.onKeyboardHeightChange((res) => {
				this.keyHei = res.height
			})
		},
		methods: {
			//编辑器初始化完成时触发
			onEditorReady() {
				uni
					.createSelectorQuery()
					.in(this)
					.select('#seeker-editor')
					.context((res) => {
						this.editorCtx = res.context
						let rtTxt = this.value
						this.setContents(rtTxt) //设置富文本内容
					})
					.exec()
			},
			//设置富文本内容
			setContents(richText) {
				this.editorCtx.setContents({
					html: richText,
					success: (res) => {},
				})
			},
			//编辑器聚焦时触发
			bindFocus(res) {
				this.focus = true
				this.retracted = false
				this.$emit('bindfocus', {
					detail: {
						value: res,
					},
				})
			},
			//编辑器失去焦点时触发
			bindBlur(res) {
				this.focus = false
				this.$emit('bindblur', {
					detail: {
						value: res,
					},
				})
			},
			// 操作栏点击
			handleBarClick(item) {
				this.focus = true
				const {
					format,
					id
				} = item
				if (id == 3) {
					this.editorCtx.undo()
					this.$emit('last')
					return
				}
				if (id == 4) {
					this.editorCtx.redo()
					this.$emit('next')
					return
				}
				if (id == 2) {
					this.insertImage()
					return
				}
				if (format) {
					const {
						key,
						val
					} = format
					this.editorCtx.format(key, val)
				}
			},
			// 点击底部输入栏
			handleBarInputClick() {
				this.retracted = false
			},
			//清空编辑器内容
			clearContent() {
				this.editorCtx.clear({
					success: (res) => {
						this.showM = false
						this.$emit('clearSuccess')
					},
				})
			},
			// 设置样式
			formatStyle(item) {
				const {
					key,
					val
				} = item
				this.editorCtx.format(key, val)
			},
			// 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
			onStatusChange(res) {
				const formats = res.detail
				this.formats = formats
			},
			//编辑器输入中时触发
			bindInput(res) {
				const {
					html,
					text
				} = res.detail
				this.inputFakeText = text === '\n' ? '' : text
				this.$emit('input', html)
			},
			//撤销
			undo() {
				this.editorCtx.undo()
				this.$emit('undo')
			},
			//恢复
			redo() {
				this.editorCtx.redo()
				this.$emit('restore')
			},
			// 插入图片
			insertImage(img) {
				uni.chooseImage({
					count: 1,
					success: (res) => {

						UploadOss.uploadFile(res).then(picture => {
							this.editorCtx.insertImage({
								src: picture,
								alt: '图像',
								success: function() {
									console.log('insert image success')
								},
							})
						})
					},
				})
			},
			// 点击开启、关闭编辑模式
			handleClickMask() {
				if (this.statusOn) {
					// 即将关闭，贴底
					this.editorBottom = 0
				} else {
					// 即将开启，底部为键盘留白
					if (this.cacheKeyHei) {
						// 使用之前缓存的键盘高度，作为底部距离
						this.editorBottom = this.cacheKeyHei
					} else {
						// 无缓存则用半屏幕高
						this.editorBottom = this.windowHeight / 2
					}
				}
				this.statusOn = !this.statusOn
			},
		},
		computed: {
			barListActive() {
				return this.barList.map((item) => {
					if (item.format) {
						const {
							key,
							val
						} = item.format
						const isFormat = this.formats[key] == val
						if (item.text) {
							const activeColor = isFormat ? item.colorAct : item.color
							return {
								...item,
								activeColor,
							}
						} else {
							const activeIcon = isFormat ? item.iconAct : item.icon
							return {
								...item,
								activeIcon,
							}
						}
					}
					return {
						...item,
						activeIcon: item.icon,
					}
				})
			},
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					// 键盘唤起，控制 bottom 紧贴
					this.editorBottom = val
					this.cacheKeyHei = val
				}
			},
			formats(val) {
				console.log('formats change!', val)
			},
			editorBottom(val) {
				console.log('editorBottom change!', val)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.editor-container {
		position: fixed;
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 0.6s;

		.editor-box {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			z-index: 5;
			padding: 20rpx;
			background: white;
			display: flex;
			flex-direction: column;
			transition: 0.6s;
		}

		.edit-area {
			height: 100%;
		}

		.edit-area-on {
			height: calc(100% - 85rpx);
		}

		.edit-body,
		.ql-container {
			height: 100%;
		}

		.edit-bar {
			transition: 1s;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;
			background-color: #FAFAFA;

			>view {
				padding: 10rpx;

				img {
					width: 50rpx;
					height: 50rpx;
				}

				span {
					font-size: 28rpx;
					width: 40rpx;
					line-height: 40rpx;
				}
			}
		}

		.ql-container {
			transition: 0.6s;
			background: white;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			min-height: 300rpx;
		}

		.editor-mask {
			z-index: 4;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: transparent;
		}
	}

	.editor-container-off {
		position: relative;
		top: 0;

		.editor-box {
			position: relative;
		}

		.editor-mask {
			z-index: 10;
		}

		.edit-body {
			display: flex;
			flex-direction: column;
		}

		.ql-container {
			transition: 0.6s;
			flex: 1;
		}
	}
</style>
